<template>
  <div class="app-container">
    <!-- 学科管理-目录 -->
    <div class="top">
      <el-form ref="form" :model="form" label-width="80px" :inline="true">
        <el-form-item label="目录名称">
          <el-input v-model="form.directoryName " placeholder="请输入学科名称"></el-input>
        </el-form-item>
        <el-form-item label="状态名称">
          <el-select v-model="form.state " placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" @click="clear">清除</el-button>
          <el-button type="primary"  size="medium" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-button type="success" icon="el-icon-edit" @click="dialogOpen">新增目录</el-button>
    </div>
    <!-- 提示 -->
    <el-alert
      :title="`数据一共${total}条`"
      type="info"
      :closable="false"
      show-icon>
    </el-alert>
  <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="subjectName" label="所属学科" width="180"></el-table-column>
      <el-table-column prop="directoryName" label="目录名称" width="180"></el-table-column>
      <el-table-column prop="username" label="创建者" width="180"></el-table-column>
      <el-table-column label="创建日期" width="200">
        <template #default="{row}">
          {{getTime(row.addDate)}}
        </template>
      </el-table-column>
      <el-table-column prop="totals" label="面试题数量" width="180"></el-table-column>
      <el-table-column prop="state" label="状态" width="180">
        <template #default="{row}">
          {{`${row.state? '已开启': '已禁用'}`}}
        </template>
      </el-table-column>
      <el-table-column  label="操作" width="180">
        <template #default="{row}">
          <el-button type="text" @click="stateChange(row.id, row.state)">
            {{row.state? '启用': '禁用'}}
          </el-button>
          <!-- 启用  不修改不删除 -->
          <el-button type="text" @click="edit(row.id)" :disabled="row.state === 1">修改</el-button>
          <el-button type="text" @click="del(row.id)" :disabled="row.state === 1">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <add-dialog ref="addDialog" :dialog-visible="visible" @dialog-close="dialogClose" @updat-list="getTableData"></add-dialog>
  </div>
</template>

<script>
import {directorysList, delDirectory, stateDirectory} from '@/api/directorys'
import {parseTime} from '@/utils/index.js'
import AddDialog from '@/views/subjects/directorys/components/add-dialog.vue'
export default {
  name: 'Directorys',
  components: {
    AddDialog
  },
  data() {
    return {
      form: {
        page: 1,
        pagesize: 10,
      },
      options:[
        {label: '启用', value: 1},
        {label: '禁用', value: 0}
      ],
      total: 0,
      tableData:[],
      visible: false,
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    clear() {
      this.form = {
        page: 1,
        pagesize: 10,
      }
      this.getTableData()
    },
    search() {
      this.getTableData(this.form)
    },
    async getTableData() {
      const res = await directorysList(this.form)
      console.log('目录',res);
      this.tableData = res.items
      this.total= res.counts
    },
    getTime(time) {
      return parseTime(time)
    },
    // 每页条数改变
    handleSizeChange(pagesize) {
      this.form.pagesize = pagesize
      this.getTableData()
    },
    // 当前页改变
    handleCurrentChange(page) {
      this.form.page = page
      this.getTableData()
    },
    // 打开弹窗
    dialogOpen() {
      this.visible = true
    },
    // 关闭弹窗
    dialogClose() {
      this.visible = false
    },
    // 修改 点击修改数据回填
    edit(id) {
      this.visible = true
      // 子组件的方法
      this.$refs.addDialog.getDetail(id)
    },
    //删除
    del(id) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          // 调删除接口
          await delDirectory(id)
          // 提示用户
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          // 刷新列表
          this.getTableData()
        })
    },
    // 状态改变
    stateChange(id, state) {
      // console.log(id, state);
      // 询问用户
      this.$confirm(`此操作将${state === 1 ? '禁用' : '启用'}该目录, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调状态接口
        await stateDirectory(id, state ? 0 : 1)
        // 提示用户
        this.$message.success(`${state === 1 ? '禁用' : '启用'}成功`)
        // 刷新列表
        this.getTableData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #fff;
  margin: 10px;
  .top {
    display: flex;
    justify-content: space-between;
  }
  .bottom {
    display: flex;
    justify-content: right;
  }
}

</style>